import React, { useRef } from 'react';
import { Button, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import '../assets/styles/register.css'
import { registerApi } from '../api/students';


export default function Register() {
    const navigate = useNavigate()
    const phoneRef = useRef(null);
    const passwordRef = useRef(null);
    const confirmRef = useRef(null);
    console.log('===========', phoneRef);
    function register() {
        console.log(11111111111);
        const phone = phoneRef.current.value;
        const password = passwordRef.current.value;
        const confirm = confirmRef.current.value;
        if (phone == '' || password == '') {
            console.log('请输入账号密码！！！！');
            message.warning('请输入账号或密码！')
        } else if (password === confirm) {
            // console.log('密码无误。');
            registerApi({ phone: phone, password: password }).then(res => {
                message.success(res.msg);
                phoneRef.current.value = '';
                passwordRef.current.value = '';
                confirmRef.current.value = '';
                navigate('/login')
            }).catch(err=>{
                console.log(11111111,err);
                phoneRef.current.value = '';
                passwordRef.current.value = '';
                confirmRef.current.value = '';
            })
        } else {
            // console.log('密码有误！');
            message.error('输入的密码不一致！');
            passwordRef.current.value = '';
            confirmRef.current.value = '';
        }

    }
    return (
        <div className='big_box'>
            <div className='box_left'>
                <div className='reg_logo'></div>
                <div className='reg_title'>Welcome To Register</div>
                <div className='reg_text'>欢迎注册考试系统</div>
                <div className='icon'></div>
                {/* <div className='icon'><img src="../assets/images/photo.png" alt="" /></div> */}

                <div className='form_box'>
                    <label className='label_account' >账号</label>
                    <input type="text" className='ipt' ref={phoneRef} />
                    <label className='label_password'>密码</label>
                    <input type="password" className='ipt' ref={passwordRef} />
                    <label className='confirm_password'>确认密码</label>
                    <input type="password" className='ipt' ref={confirmRef} />
                </div>
                <div className='reg_btn_box'>
                    <button className='reg_btn' onClick={register}>注册</button>
                    {/* <Button type="primary">注册</Button> */}
                </div>
            </div>
            <div className='box'></div>
        </div>
    )
}
